/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, TableHead,
} from "customize-easy-ui-component";
import {DirectLink} from "../../routing/Link";
import {TailMenRowIspCheck} from "../contain/rarelyVary";

//焊接资格
export const WeldingQualific= ({orc, rep} :{orc:any, rep:any}
) => {
  //const theme= useTheme();
  //两半各安显一排模式的用：const [renderRows,]=useRep2hTableViewer(config焊接资格, '附设表', orc,true,true,true);
  return <>
    <div css={{"@media print": {paddingBottom: '2rem', pageBreakInside: 'avoid'}} }>
      <Text id='WeldingQualif' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>现场焊接作业人员资格明细表</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["12%", "%" ] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-2rem'}}} tight  miniw={800}>
      <TableBody>
        <TableRow>
          <CCell>工程名称</CCell>
          <CCell>{orc?.工程名称}</CCell>
        </TableRow>
      </TableBody>
    </Table>
    <Table fixed={ ["4%", "8%", "20%","%", "13%", "8%"] } css={{borderCollapse: 'collapse', }} tight  miniw={800}>
      <TableHead>
          <TableRow>
            <CCell><Text css={{fontSize:'0.75rem'}}>序号</Text></CCell><CCell><Text css={{fontSize:'0.75rem'}}>焊工名字</Text></CCell><CCell>证件编号</CCell>
            <CCell>项目代号</CCell><CCell>有效期</CCell><CCell><Text css={{fontSize:'0.75rem'}}>焊工代号</Text></CCell>
          </TableRow>
      </TableHead>
      <TableBody>
       <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/WeldingQualif#WeldingQualif`}>
         { (orc?.焊资表||[{}])?.map((o: any, i: number) => {
           if(!(orc?.焊资表?.length>0))  return <TableRow key={i}><CCell colSpan={6}>空表</CCell></TableRow>;
           return (
               <TableRow key={i}>
                 <CCell>{i+1}</CCell>
                 <CCell>{o.n}</CCell>
                 <CCell>{o.z}</CCell>
                 <Cell css={{whiteSpace:'pre-wrap'}}>{o.x}</Cell>
                 <CCell>{o.v}</CCell>
                 <CCell>{o.H}</CCell>
               </TableRow>
           );
         } ) }
       </DirectLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck orc={orc} rep={rep} cap={'监检员'} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
      <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/WeldingQualif#WeldingQualif`}>
        <TableRow>
          <Cell colSpan={2}><div css={{
            minHeight: '3rem',whiteSpace:'pre-wrap'
          }}>备注：<br/>{orc.焊资备注}</div></Cell>
        </TableRow>
      </DirectLink>
    </TailMenRowIspCheck>
  </>;
};

//无损检测人员资格
export const NonDestructiveVw= ({orc, rep,title} :{orc:any, rep:any,title?:string}
) => {
  //const theme= useTheme();
  //两半各安显一排模式的用：const [renderRows,]=useRep2hTableViewer(config焊接资格, '附设表', orc,true,true,true);
  return <>
    <div css={{"@media print": {paddingBottom: '2rem', pageBreakInside: 'avoid'}} }>
      <Text id='NonDestructive' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>{title??'无损检测人员资格明细表'}</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["12.5%", "%" ] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-2rem'}}} tight  miniw={800}>
      <TableBody>
        <TableRow>
          <CCell>工程名称</CCell>
          <CCell>{orc?.工程名称}</CCell>
        </TableRow>
      </TableBody>
    </Table>
    <Table fixed={ ["4%", "8.5%", "21%","%", "23%"] } css={{borderCollapse: 'collapse', }} tight  miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize:'0.75rem'}}>序号</Text></CCell><CCell>姓名</CCell><CCell>证书编号</CCell>
          <CCell>持证项目</CCell><CCell>有效期</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/NonDestructive#NonDestructive`}>
          { (orc?.损资表||[{}])?.map((o: any, i: number) => {
            if(!(orc?.损资表?.length>0))  return (<TableRow key={i}><CCell colSpan={5}>空表</CCell></TableRow>);
            return (
                <TableRow key={i}>
                  <CCell>{i+1}</CCell>
                  <CCell>{o.n}</CCell>
                  <CCell>{o.z}</CCell>
                  <CCell css={{whiteSpace:'pre-wrap'}}>{o.x}</CCell>
                  <CCell>{o.v}</CCell>
                </TableRow>
            );
          } ) }
        </DirectLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck orc={orc} rep={rep} cap={'监检员'} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
      <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/NonDestructive#NonDestructive`}>
        <TableRow>
          <Cell colSpan={2}><div css={{
            minHeight: '3rem',whiteSpace:'pre-wrap'
          }}>备注：<br/>{orc.损资备注}</div></Cell>
        </TableRow>
      </DirectLink>
    </TailMenRowIspCheck>
  </>;
};

